<template>
	<view class="topWrap pad_lr_30 flex-jus">
		<view class="search flex-ac" @tap="href('/pages/search/index')">
			<image class="icon" src="@/static/images/com/searchs.webp"></image>
			<u-notice-bar :text="searchList" direction="column" color="#090909" fontSize="24rpx" bgColor="" icon=""
				class="notBar"></u-notice-bar>
		</view>
		<view class="manhua flex-ac" @tap="href(imgConfig.url)" v-if="imgConfig.id>0">
			<image class="tips" :src="imgConfig.tips" v-if="imgConfig.tips"></image>
			<view class="imgs" :style="{'background-image':'url('+imgConfig.img+')'}" v-if="imgConfig.img"></view>
			<view class="text">{{imgConfig.text}}</view>
		</view>
	</view>


	<u-swiper bgColor="#fff" radius="15rpx" :list="banner" indicator circular previousMargin="30" showTitle
		indicatorMode="dot" :current="current" nextMargin="30" height="115" :loading="banner.length==0" keyName="bigImg"
		@change="swiperChange" @click="swiperClick">
	</u-swiper>
	<view class="indicator flex-ju-al">
		<view class="indicator__dot" v-for="(item, index) in banner" :key="index" @click="current=index"
			:class="[index === current && 'indicator__dot--active']">
		</view>
	</view>
	<view class="pad_lr_30">
		<template v-for="(item,index) in bookData" :key="index">
			<book-list :type="item.type" :title="item.title" :list="item.list"></book-list>
		</template>
	</view>
</template>

<script setup>
	import {
		getSearchTextApi,
		getBannerApi,
		getHomeApi,
		getPopApi
	} from '@/common/js/api'

	// store start
	// import {
	// 	storeToRefs
	// } from 'pinia'
	// const userStore = inject("$store").user.useUserStore()
	//store end

	// const {
	// 	count
	// } = storeToRefs(userStore)
	// const addCount = () => {
	// 	userStore.increment()
	// }

	const banner = ref([])
	const current = ref(0)
	const searchList = ref([])
	const bookData = ref([])
	const imgConfig = ref({
		id: 0
	})

	onLoad(() => {
		init()
	})

	const init = () => {
		getBannerApi().then((res) => {
			let {
				data
			} = res
			banner.value = data.list
			imgConfig.value = data.imgConfig
		})
		getSearchTextApi().then((res) => {
			searchList.value = res.data
		})
		getHomeApi().then((res) => {
			let {
				data
			} = res
			bookData.value = data
		})
	}

	const swiperChange = (e) => {
		current.value = e.current
	}
	const swiperClick = (e) => {

		console.log('==swiperClick==', e);
	}
</script>

<style lang="scss" scoped>
	.topWrap {
		padding-top: 30rpx;
		padding-bottom: 40rpx;

		.search {
			flex:1;
			height: 58rpx;
			margin-right:20rpx;
			border-radius: 29rpx;
			background-color: #F8F8F8;

			.icon {
				width: 62rpx;
				height: 58rpx;
			}

			.notBar {
				padding: 0 20rpx 4rpx 0;
			}
		}

		.manhua {
			background-color: #F8F8F8;
			padding: 0 20rpx 0 10rpx;
			height: 58rpx;
			border-radius: 29rpx;
			position: relative;

			.tips {
				width: 46rpx;
				height: 20rpx;
				position: absolute;
				top: -10rpx;
				right: -14rpx;
			}

			.imgs {
				width: 50rpx;
				height: 50rpx;
				background-position: center top;
				background-repeat: no-repeat;
				background-size: 100% auto;
				border-radius: 50%;
			}

			.text {
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>